/*
 * @作者: 京涛
 * @时间: 2020-09-08 10:31:10
 * @最后修改时间: 2020-09-14 09:59:54
 * @FilePath: \曲美家具项目\js\index.js
 * @项目名称: 每天都要记得写代码啊！
 */
/**
 * 轮播
 */
$(document).ready(function () {
  var translateX = [
    "0",
    "-11.11%",
    "-22.22%",
    "-33.33%",
    "-44.44%",
    "-55.55%",
    "-66.66%",
    "-77.77%",
    "-88.88%",
  ];
  var translateXIndex = 0;
  //封装自动轮播的操作
  function bannerAutoMain() {
    translateXIndex++;
    $(".picList>ul").css({
      transitionDuration: "500ms",
      transform: "translate(" + translateX[translateXIndex] + ",0px)",
    });
    if (translateXIndex == 8) {
      translateXIndex = 1;
      setTimeout(() => {
        $(".picList>ul").css({
          transitionDuration: "0ms",
          transform: "translate(" + translateX[translateXIndex] + ",0px)",
        });
      }, 500);
    }
  }
  var bannerAuto = setInterval(bannerAutoMain, 3000);
  // 当鼠标点击的时候移除定时器并切换
  $(".prev").click(function () {
    clearInterval(bannerAuto);
    translateXIndex--;
    $(".picList>ul").css({
      transitionDuration: "500ms",
      transform: "translate(" + translateX[translateXIndex] + ",0px)",
    });
    if (translateXIndex == 0) {
      translateXIndex = 7;
      setTimeout(() => {
        $(".picList>ul").css({
          transitionDuration: "0ms",
          transform: "translate(" + translateX[translateXIndex] + ",0px)",
        });
      }, 500);
    }
  });
  $(".next").click(function () {
    clearInterval(bannerAuto);
    setTimeout(() => {
      bannerAuto = setInterval(bannerAutoMain, 3000);
    }, 100);
    translateXIndex++;
    $(".picList>ul").css({
      transitionDuration: "500ms",
      transform: "translate(" + translateX[translateXIndex] + ",0px)",
    });
    if (translateXIndex == 8) {
      translateXIndex = 1;
      setTimeout(() => {
        $(".picList>ul").css({
          transitionDuration: "0ms",
          transform: "translate(" + translateX[translateXIndex] + ",0px)",
        });
      }, 500);
    }

  });

  $(".picList>ul").mouseenter(function () {
    clearInterval(bannerAuto)
  })
  $(".picList>ul").mouseout(function () {
    bannerAuto = setInterval(bannerAutoMain, 3000);
  })

  /**
   *  八大生活方式的轮播图
   */
  var bannerTranslateXArr = ["0", "-850", "-1700", "-2550", "-3400"];
  var bannerTranslateXIndex = 0;
  var bannerIndex = 0;
  var bannerPic = document.querySelectorAll(".bannerPic");
  bannerPic = Array.from(bannerPic);
  // 定时器切换图片
  var bannerAuto2 = function () {
    bannerTranslateXIndex++;
    bannerPic[bannerIndex].style.transitionDuration = "500ms";
    bannerPic[bannerIndex].style.transform =
      "translateX(" + bannerTranslateXArr[bannerTranslateXIndex] + "px)";
    if (bannerTranslateXIndex == 4) {
      setTimeout(function () {
        bannerTranslateXIndex = 0;
        $(".bannerPic")
          .eq(bannerIndex)
          .css({
            transitionDuration: "0ms",
            transform: "translateX(" +
              bannerTranslateXArr[bannerTranslateXIndex] +
              "px)",
          });
      }, 500);
    }
  };
  var bannerAuto2Interval = setInterval(bannerAuto2, 3000);
  $(".prevBtn2").mouseenter(function () {
    clearInterval(bannerAuto2Interval);
  });
  $(".nextBtn2").mouseenter(function () {
    clearInterval(bannerAuto2Interval);
  });
  $(".nextBtn2").mouseout(function () {
    bannerAuto2Interval = setInterval(bannerAuto2, 3000);
  });
  $(".prevBtn2").mouseout(function () {
    bannerAuto2Interval = setInterval(bannerAuto2, 3000);
  });
  // 上一张
  $(".prevBtn2").click(function () {
    if (bannerTranslateXIndex == 1) {
      setTimeout(function () {
        bannerPic[bannerIndex].style.transitionDuration = "0ms";
        bannerPic[bannerIndex].style.transform =
          "translateX(" + bannerTranslateXArr[4] + "px)";
      }, 500);
    }
    if (bannerTranslateXIndex == 0) {
      bannerTranslateXIndex = 4;
    }
    bannerTranslateXIndex--;
    bannerPic[bannerIndex].style.transitionDuration = "500ms";
    bannerPic[bannerIndex].style.transform =
      "translateX(" + bannerTranslateXArr[bannerTranslateXIndex] + "px)";
  });
  //下一张
  $(".nextBtn2").click(function () {
    bannerTranslateXIndex++;
    bannerPic[bannerIndex].style.transitionDuration = "500ms";
    bannerPic[bannerIndex].style.transform =
      "translateX(" + bannerTranslateXArr[bannerTranslateXIndex] + "px)";
    if (bannerTranslateXIndex == 5) {
      bannerTranslateXIndex = 0;
      setTimeout(function () {
        bannerPic[bannerIndex].style.transitionDuration = "0ms";
        bannerPic[bannerIndex].style.transform =
          "translateX(" + bannerTranslateXArr[bannerTranslateXIndex] + "px)";
      }, 500);
    }
  });

  /**
   * 八大生活方式的导航切换
   */
  $(".liveStyle .styleTags li").each(function (liIndex, li) {
    li.onclick = function () {
      bannerIndex = liIndex;
      bannerTranslateXIndex = 0;
      // 先排它将所有的导航背景去掉
      $(".liveStyle .styleTags li").each(function (liIndexTemp, liTemp) {
        liTemp.className = "";
      });
      this.className = "checkedLi";
      //点击导航栏对应的轮播图显示，别的隐藏
      $(".banner2 .banner2Main").each(function (bannerIndex, banner) {
        banner.className = "banner2Main";
        if (liIndex == bannerIndex) {
          banner.className = "banner2Main on";
        }
      });
    };
  });
  /**
   * 全屋定制导航切换
   */
  $(".wholeHome .styleTags2 ul li").each(function (tagIndex, tag) {
    tag.onclick = function () {
      $(".styleTags2 ul li").each(function (tagIndexTemp, tagTemp) {
        tagTemp.className = "";
      });
      this.className = "checkedLi";
      $(".wholeHomeContent>div").each(function (divIndex, div) {
        div.className = "hidden";
        if (divIndex == tagIndex) {
          div.className = "";
        }
      });
    };
  });
  /**
   * 精彩案例导航
   */

  $(".exampleShow .styleTags ul li").each(function (styleTagIndex, styleTag) {
    styleTag.onclick = function () {
      $(".exampleShow .styleTags ul li").each(function (
        styleTagIndexTemp,
        styleTagTemp
      ) {
        styleTagTemp.className = "";
      });

      this.className = "checkedLi";
      $(".picShow>div").each(function (picShowDivIndex, picShowDiv) {
        picShowDiv.className = "hidden";
        if (picShowDivIndex == styleTagIndex) {
          picShowDiv.className = "";
        }
      });
    };
  });
});